import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

//静态路由配置
void main() => runApp(const MyApp3());

//定义根目录Widget
class MyApp3 extends StatelessWidget {
  const MyApp3({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      localizationsDelegates: const [
        //初始化默认的 Material 组件本地化
        GlobalMaterialLocalizations.delegate,
        //初始化默认的 通用 Widget 组件本地化
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      //当前区域，如果为null则使用系统区域一般用于语言切换
      //传入两个参数，语言代码，国家代码
      //这里配制为中国
      locale: const Locale('zh', 'CN'),
      //定义当前应用程序所支持的语言环境
      supportedLocales: const [
        Locale('en', 'US'), // English 英文
        Locale('zh', 'CN'), // 中文
      ],
      routes: {
        //默认页面
        "/": (BuildContext context) => const Exam218HomePage(),
      },
    );
  }
}

///代码清单2-21
///代码路径 lib/code2/code218_Container.dart
class Exam218HomePage extends StatefulWidget {
  const Exam218HomePage({Key? key}) : super(key: key);

  @override
  State<Exam218HomePage> createState() => _Exam218HomePageState();
}

class _Exam218HomePageState extends State<Exam218HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //页面的头部
      appBar: AppBar(title: const Text("标题")),
      //页面的主内容区
      body: Center(
        child: buildBorderAndColor(),
      ),
    );
  }

  Container buildBaseContainer() {
    return Container(
      width: 220,
      //宽
      height: 120,
      //高
      padding: const EdgeInsets.only(left: 12, right: 24),
      //内边距
      margin: const EdgeInsets.all(40),
      //外边距
      child: const Text("早起的年轻人"),
    );
  }
  ///代码清单2-20 Container 实现圆角边框
  ///代码路径 lib/code2/code218_Container.dart
  Container buildBorderAndColor() {
    return Container(
      //子Widget居中对齐
      alignment: Alignment.center,
      width: 200,
      height: 100,
      //主要是这里
      decoration: BoxDecoration(
        // 边框颜色与宽度
        border: Border.all(color: const Color(0x2A00FFFF), width: 3.5),
        //边框圆角 四个角全部配置 如表2-56所示为构建圆角的方法概述
        borderRadius: const BorderRadius.all(
          Radius.circular(20),
        ),
        //填充色
        color: Color(0x559E9E9E),
      ),
      child: Text("配置边框与填充色"),
    );
  }

  Container buildBoxShadow() {
    return Container(
      //子Widget居中对齐
      alignment: Alignment.center,
      width: 200,
      height: 100,
      decoration: const BoxDecoration(
        color: Colors.blue,
        //可配置多组阴影效果
        boxShadow: [
          //配制阴影
          BoxShadow(
            color: Colors.red,//阴影的颜色
            offset: Offset(10.0, 10.0),//阴影在x轴与y轴上的偏移量
            blurRadius: 20.0,//模糊半径
            spreadRadius: 1, //阴影的延伸量
          )
        ],
      ),
      child: Text("配置阴影"),
    );
  }
  ///  Container  gradient 线性渐变颜色过渡
  Container buildBorder5() {
    return Container(
      //子Widget居中对齐
      alignment: Alignment.center,
      width: 200,
      height: 100,
      decoration: const BoxDecoration(
          // 线性渐变
          gradient: LinearGradient(
            //渐变过渡的颜色体系
            colors: [Colors.blue, Colors.yellow, Colors.red],
            //过渡的开始位置
            begin: FractionalOffset(0, 0.5),
            //过渡的结束位置
            end: FractionalOffset(1, 0.5),
          ),),
      child: Text("配置渐变颜色"),
    );
  }
  ///   Sweep 扫描渐变颜色过渡
  Container buildSweep() {
    return Container(
      //子Widget居中对齐
      alignment: Alignment.center,
      width: 200,
      height: 100,
      decoration: const BoxDecoration(
        // 扫描渐变
        gradient: SweepGradient(
          //渐变过渡的颜色体系
          colors: [Colors.blue, Colors.yellow, Colors.red],
          //过渡的开始角度 默认是0
          startAngle: 0.0,
          //过渡的结束角度 默认是1*3.1415926，也就是在默认情况下，是从0-360
          endAngle: 1 * 3.14,
          //中心点 默认就是当前Container的中心
          //也可以通过Alignment.center来配置
          center: FractionalOffset(0.5, 0.5),
        ),
      ),
      child: Text("配置渐变颜色"),
    );
  }

  /// Container BoxDecoration  Radial 环形渐变颜色过渡
  Container buildRadial() {
    return Container(
      //子Widget居中对齐
      alignment: Alignment.center,
      width: 200,
      height: 200,
      decoration: const BoxDecoration(
        color: Colors.blue,
        // 环形渐变
        gradient: RadialGradient(
          //渐变过渡的颜色体系
          colors: [Colors.red,Colors.yellow, Colors.black, ],
          //渐变颜色的过渡半径
          //由Container的短边决定
          radius: 0.5,
          //过渡半径之外的颜色填充模式
          // 默认是clamp，直接使用colors中配置的最后一个颜色填充
          //如这里配置的黑色
          tileMode: TileMode.clamp,
          //中心点 默认就是当前Container的中心
          //也可以通过Alignment.center来配置
          center: FractionalOffset(0.5, 0.5),
        ),
      ),
      child: Text("配置渐变颜色"),
    );
  }


}
